import { Meta, Unstyled } from "@storybook/addon-docs/blocks";
import { Link, Ul } from './../';

<Meta title="Documents/はじめに" />

<Unstyled>
<div className="prose">

# デジタル庁デザインシステム コードスニペット（React版）

[デジタル庁デザインシステム](https://design.digital.go.jp/)をReact/Tailwind CSSで実装したサンプル集です。[HTML版はこちら](https://design.digital.go.jp/dads/html/)。

## コンセプト

### アクセシビリティファースト

アクセシビリティを最優先事項として位置付けています。

公開されているすべてのコンポーネントは、[WCAG](https://waic.jp/translations/WCAG22/)等のアクセシビリティガイドラインを最大限に取り込んだデジタル庁デザインシステムのガイドラインを基に作られており、アクセシビリティの専門家によるチェックも受けています。

これにより、デジタル庁デザインシステムのコンポーネントを使うことで、WCAGの各達成基準に適合または適合が容易になります。

### HTML ネイティブ機能の活用

保守性の観点から、可能な限りHTMLネイティブの機能を使用することを重視して開発をしています。

[HTML Living Standard](https://html.spec.whatwg.org)や[Open UI](https://open-ui.org/)の動向を常に確認し、新しいHTMLネイティブの機能が利用可能になった際には、既存の実装を最新の標準に置き換えていきます。この取り組みにより、一部のブラウザではまだ実装されていない最新機能を試験的に導入することもあります。

HTMLネイティブ機能だけでは実現できないコンポーネントに関しては、ヘッドレスUIライブラリの使用を推奨します。

一部のサンプルコードでは、Reactの機能を使った実装も提供していますので、実装の参考にしてください。WAI-ARIAやキーボード操作などの挙動については[ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/)の[Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/)を参考にして実装しています。

## コンポーネントのバージョンについて

DADS v2はv2.0.0以降の最新のガイドラインとデザインデータを基に作られたコンポーネントです。

v1.x系統が基となっているDADS v1のコンポーネントは非推奨となっています。それらのコンポーネントのガイドラインとデザインデータがv2に追加され次第、順次DADS v2に置き換えていく予定です。

## 検証済み環境

下記のブラウザで動作を確認しています。

- Google Chrome最新版
- Microsoft Edge最新版
- Safari最新版
- Firefox最新版

下記のスクリーンリーダーでも動作を確認しています。

- NVDA
- iOS VoiceOver
- TalkBack
- Mac VoiceOver

## アクセシビリティ

本コードスニペットの提供にあたり、Storybookと呼ばれるオープンソースソフトウェアを使用していますが、Storybookには既知のアクセシビリティ上の問題が存在します。提供しているコードのソースコードにアクセスできない場合、[GitHubのリポジトリ](https://github.com/digital-go-jp/design-system-example-components-react)から直接ソースコードを取得してください。

## 不具合報告・機能要望について

本コードスニペットに関する不具合や機能要望は、[GitHubのリポジトリ](https://github.com/digital-go-jp/design-system-example-components-react)からIssueを作成して報告してください。Pull Requestは受け付けておりません。

</div>
</Unstyled>
